<template>
  <div class="app-container">
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="平台名称">
          <template slot-scope="scope">
            {{ scope.row.powerName }}
          </template>
        </el-table-column>
        <el-table-column label="平台标识">
          <template slot-scope="scope">
            {{ scope.row.idVal }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              round
              plain
              size="mini"
              @click="openSetting(scope.row.idVal)"
            >
              AAA策略配置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div> -->
    </div>
    <setting-aaa :dialog-status="dialogStatus" :platform-id="platformId" @closeDia="closeDia" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import powerbtn from '@/directive/powerbtn/index.js'
import settingAaa from './components/setting.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    settingAaa: settingAaa
  },
  data() {
    return {
      platformId: '',
      dialogStatus: false,
      list: [], // 请求列表
      faStatus: '',
      userId: '',
      serviceId: '',
      flag: true,
      serviceType: '',
      monitId: '',
      platform: '',
      platformArr: [],
      name: '', // 服务名称
      source: '', // 服务来源
      pay: [], // 支付渠道下拉
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      watchId: '0', // 策略id
      count: 0, // 总数量
      paySelect: [],
      serviceTypeArr: [],
      sourceArr: [],
      arr: [], // 多选
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  mounted() {
    this.platformArr = this.plat
    console.log(this.plat)
    if (this.platformArr.length > 0) {
      this.platformArr.forEach(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
      })
      // this.getSelectAll()
    }
    if (this.platformArr.length === 1) {
      var sina = this.platformArr[0].powerCode.lastIndexOf('-')
      this.platformId = this.platformArr[0].powerCode.substr(sina + 1)
      // this.getSelectAll(true)
    }
    this.list = this.platformArr
    console.log(this.platformArr)
    this.count = this.list.length
  },
  methods: {
    openSetting(platformId) {
      console.log(platformId)
      this.dialogStatus = true
      this.platformId = platformId
    },
    closeDia() {
      this.dialogStatus = false
    },
    // 请求列表
    loadList(status) {
      this.pageid = 1
      this.pageid = 1
      if (status === true) {
        this.platform = this.platformId
      }
      /* const request = {
        onlyFlag: this.userId,
        name: this.name,
        platformId: this.platform,
        flag: this.faStatus,
        beginTime: this.startDate,
        endTime: this.endDate,
        lspid: '',
        cspid: '',
        queryType: '0',
        pageNum: 1, // 当前页数
        limit: 20 // 每页可显示条数
      } */
    },
    handleSelectionChange(val) {
      console.log(val)
      if (val.length > 0) {
        this.monitId = val.map(item => {
          return item.id
        })
      }
      if (val.length === 0) {
        this.monitId = []
      }
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    connect(id) {
      this.editDialog = true
      this.watchId = id
    },

    closeConect() {
      this.editDialog = false
    },

    reset() {
      if (this.platformArr.length !== 1) {
        this.platform = ''
      }
      this.userId = ''
      this.faStatus = ''
      this.serviceId = ''
      this.name = ''
      this.source = ''
      this.serviceType = ''
      this.startDate = ''
      this.endDate = ''
    },
    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        onlyFlag: this.userId,
        name: this.name,
        platformId: this.source,
        flag: this.faStatus,
        beginTime: this.startDate,
        endTime: this.endDate,
        lspid: '',
        cspid: '',
        queryType: '0',
        pageNum: 1, // 当前页数
        limit: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
    },
    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        onlyFlag: this.userId,
        name: this.name,
        platformId: this.source,
        flag: this.faStatus,
        beginTime: this.startDate,
        endTime: this.endDate,
        lspid: '',
        cspid: '',
        queryType: '0',
        pageNum: num, // 当前页数
        limit: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
    },
    // 查看
    watch(id) {
      this.watchDialog = true
      this.watchId = id
    },

    edit(id) {
      this.editDialog = true
      this.watchId = parseInt(id)
      this.paySelect = this.pay
    },

    // 关闭查看回调
    closeWatch() {
      this.watchDialog = false
    },

    // 新增
    add() {
      this.addDialog = true
      this.paySelect = this.pay
    },

    // 关闭新增回调
    closeAdd() {
      this.addDialog = false
    },

    closeEdit() {
      this.editDialog = false
    }
  }
}
</script>

<style scoped>
.addBtns{
  margin: 5px 0;
}
.timeLength{
  width: 37.5% !important;
}
</style>
